import React from 'react';
import { observer } from 'mobx-react-lite';
import { useNavigate } from 'react-router-dom';
import PublicHeader from '@/components/header';
import TouchableOpacity from '@/components/touchable-opacity';
import MobileItem from './mobile-item';
import PasswordItem from './password-item';
import UsernameItem from './username-item';
import TokenItme from './token-item';
import loginStore from '@/store/login';
import appStore from '@/store/app';

const LoginPage = observer(() => {
    const navigate = useNavigate();
    return (
        <main className='container home-container'>
            <PublicHeader title='登录' confirm={false} record={false} />
            <p className='common-title'>请录入您的信息</p>
            <form
                className='home-form pb-4'
                onSubmit={(e) => {
                    e.preventDefault();
                }}
            >
                <UsernameItem />
                <MobileItem />
                <PasswordItem />
                <TokenItme />
                <TouchableOpacity
                    className='submit-btn'
                    onClick={async () => {
                        if (!loginStore.username) {
                            appStore.showAlert('请输入用户名');
                        } else if (!loginStore.mobile) {
                            appStore.showAlert('请输入手机号');
                        } else if (!loginStore.password) {
                            appStore.showAlert('请输入密码');
                        } else if (!loginStore.accesstoken) {
                            appStore.showAlert('请输入token');
                        } else {
                            appStore.setLoading(true);
                            const res = await loginStore.postAccesstoken();
                            appStore.setLoading(false);
                            if (res) {
                                navigate('/topics');
                            }
                        }
                    }}
                />
            </form>
        </main>
    );
});
export default LoginPage;
